<script lang="ts" setup>
import {defineProps} from 'vue';

// 接收三个参数：上一页文章、下一页文章和当前页面的路由名称
const props = defineProps<{
  previousArticle?: ArticleRecord | null;
  nextArticle?: ArticleRecord | null;
  currentPageRouteName: string; // 必须传递的当前页面路由路径
}>();
</script>

<template>
  <div class="contpage">
    <ul>
      <li v-if="previousArticle">
        <span>上一条:</span>
        <RouterLink
            :to="{ name: currentPageRouteName, query: { articleId: previousArticle.id } }"
        >
          {{ previousArticle.title }}
        </RouterLink>
      </li>
      <li v-if="nextArticle">
        <span>下一条:</span>
        <RouterLink
            :to="{ name: currentPageRouteName, query: { articleId: nextArticle.id } }"
        >
          {{ nextArticle.title }}
        </RouterLink>
      </li>
    </ul>
  </div>
</template>

<style scoped>
</style>
